<template>
  <div class="volume-container flex flex-col items-center pt-2">
    <el-slider
      vertical
      height="100px"
      :show-tooltip="false"
      v-model="volume"
      :max="100"
      :min="0"
      size="small"
      :disabled="muted"
      @input="setVolume"
    />
    <div class="text-sm mt-3">{{ volume }}</div>
    <div class="mt-2">
      <IconPark
        :icon="muted ? VolumeMute : VolumeSmall"
        size="16"
        theme="filled"
        class="icon-hover"
        @click="toggleMuted"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { VolumeMute, VolumeSmall } from '@icon-park/vue-next'
import { usePlayerStore } from '@/stores/player'
import { toRefs } from 'vue'
const { volume, muted, toggleMuted, setVolume } = toRefs(usePlayerStore())
</script>

<style lang="less">
.el-popover.el-popper {
  min-width: auto;
}
</style>
